<template>
	<view>
		<view class="">
			<image src="@/static/img/ic_login_bg.png" style="width:750rpx;height: 441rpx;" mode=""></image>
		</view>
		<view class="flex align-center justify-center">
			<view class="px-2 m-2 font34" :class="{ 'text-main': type == 1 }" @click="toLogin">登录</view>
			<view class="px-2 m-2 font34" :class="{ 'text-main': type == 2 }" @click="register">注册</view>
		</view>
		<view class="px-4" v-show="type == 1">
			<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
				<image src="../../static/img/ic_login_account.png" class="mr-4"
					style="height: 55rpx;width:36rpx;margin-left: 5rpx;" mode=""></image>
				<!-- <input type="number" @input="onKeyInput" focus class="font30" :value="inputValue"
					placeholder="请输入手机号" /> -->
				<u--input placeholder="请输入手机号" border="none" v-model="inputValue"></u--input>
			</view>
			<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
				<image src="../../static/img/ic_login_password.png" class="mr-4" style="height: 55rpx;width:46rpx;"
					mode=""></image>
				<!-- <input type="password" @input="onPassInput" focus class="font30" :value="password"
					placeholder="请输入密码" /> -->
				<u--input placeholder="请输入密码" type="password" border="none" v-model="password"></u--input>
			</view>
			<view class="flex align-center mt-5 justify-end">
				<!-- 	<view class="font30 color999 flex align-center" @click="passType">
					<image src="../../static/img/ic_checked.png" v-if="passTrue" style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					<image src="../../static/img/ic_uncheck.png" v-else style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					记住密码
				</view>
				<view class="font30 color999 flex align-center" @click="loginType">
					<image src="../../static/img/ic_checked.png" v-if="loginTrue" style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					<image src="../../static/img/ic_uncheck.png" v-else style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					自动登录
				</view> -->
				<navigator url="../forgetPass/forgetPass">
					<view class="font30" style="color: #5798d4;">忘记密码</view>
				</navigator>
			</view>
			<view class="px-2 mt-5">
				<main-button @click="sumitLogin(2)">家长登录</main-button>
			</view>
			<view class="px-2 mt-5">
				<main-button @click="sumitLogin(1)">教师登录</main-button>
			</view>
		</view>
		<view class="px-4" v-show="type == 2">
			<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
				<image src="../../static/img/ic_login_account.png" class="mr-4"
					style="height: 55rpx;width:36rpx;margin-left: 5rpx;" mode=""></image>
				<input type="number" @input="reKeyInput" focus class="font30" value="" placeholder="请输入手机号" />
			</view>
			<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
				<image src="../../static/img/ic_login_password.png" class="mr-4" style="height: 55rpx;width:46rpx;"
					mode=""></image>
				<input type="password" @input="rePassInput" focus class="font30" value="" placeholder="请输入密码" />
			</view>
			<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
				<image src="../../static/img/ic_login_password.png" class="mr-4" style="height: 55rpx;width:46rpx;"
					mode=""></image>
				<input type="password" @input="newrePassInput" focus class="font30" value="" placeholder="请再次输入密码" />
			</view>
			<!-- <view class="flex align-center mt-5 justify-between">
				<view class="font30 color999 flex align-center" @click="passType">
					<image src="../../static/img/ic_checked.png" v-if="passTrue" style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					<image src="../../static/img/ic_uncheck.png" v-else style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					记住密码
				</view>
				<view class="font30 color999 flex align-center" @click="loginType">
					<image src="../../static/img/ic_checked.png" v-if="loginTrue" style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					<image src="../../static/img/ic_uncheck.png" v-else style="width:43rpx;height: 43rpx;" class="mr-1" mode=""></image>
					自动登录
				</view>
				<view class="font30" style="color: #5798d4;">忘记密码</view>
			</view> -->
			<view class="px-2 mt-5">
				<main-button @click="submitRegister">家长注册</main-button>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import mainButton from '../../components/common/main-buttom.vue';
	export default {
		data() {
			return {
				type: 1,
				inputValue: '',
				password: '',
				passTrue: false,
				loginTrue: false,
				registerValue: '',
				registerPass: '',
				newregisterPass: '',
				passStatus: false,
				intType: null,
				stopsubmit: false
			};
		},
		computed: mapState(['userInfo']),
		components: {
			mainButton
		},
		onShow() {
			let that = this;
			//缓存的账号
			const HCmobile = uni.getStorageSync('HCmobile');
			//缓存的密码

			const HCpassword = uni.getStorageSync('HCpassword');
			const intType = uni.getStorageSync('intType');
			//有缓存就赋值给文本没有就清空
			if (HCmobile && HCpassword) {
				that.inputValue = HCmobile;
				that.password = HCpassword;
				if (intType) {
					that.intType = intType;
					that.sumitLogin(intType)
				}
			} else {
				that.inputValue = '';
				that.password = '';
			}
		},
		methods: {
			onKeyInput: function(event) {
				this.inputValue = event.target.value;
			},
			onPassInput: function(event) {
				this.password = event.target.value;
			},
			reKeyInput: function(event) {
				this.registerValue = event.target.value;
			},
			rePassInput: function(event) {
				this.registerPass = event.target.value;
			},
			newrePassInput: function(event) {
				this.newregisterPass = event.target.value;

			},
			passType() {
				this.passTrue = !this.passTrue;
			},
			loginType() {
				this.loginTrue = !this.loginTrue;
				if (this.loginTrue) {
					this.passTrue = true;
				}
			},
			sumitLogin(type) {
				let _this = this;
				if (!_this.stopsubmit) {
					_this.intType = type;
					_this.stopsubmit=true;
					if (_this.inputValue != '' && _this.password != '') {
						if (!_this.$until.checkMobile(_this.inputValue)) {
							uni.showToast({
								title: '手机号格式错误',
								icon: 'none'
							});
							_this.stopsubmit=false;
							return;
						} else {
							let opts = {
								url: 'Login.shtml'
							};
							let param = {
								intType: _this.intType,
								phone_number: _this.inputValue,
								password: _this.password,
								openid: uni.getStorageSync('openId'),
								regId: '1104a89792c0bbf2d8d'
							};
							_this.$http.httpRequest(opts, param).then(
								res => {
									console.log(res.data);
									_this.stopsubmit=false;
									if (res.data.code == '200') {
										uni.setStorageSync('HCmobile', _this.inputValue);
										uni.setStorageSync('HCpassword', _this.password);
										uni.setStorageSync('intType', _this.intType);
										_this.login(res.data.data);
										uni.switchTab({
											url: '../class/class'
										});
									} else {
										uni.showToast({
											icon: 'none',
											title: res.data.msg
										});
									}
								},
								error => {
									_this.stopsubmit=false;
									console.log(error);
								}
							);
						}
					} else {
						uni.showToast({
							title: '请输入输入手机号',
							icon: 'none'
						});
					}
				}

			},
			...mapMutations(['login']),
			toLogin() {
				this.type = 1;
			},
			register() {
				this.type = 2;
			},
			submitRegister() {
				let _this = this;
				if (_this.newregisterPass != '' && _this.registerPass != '' && _this.registerValue != '') {
					if (!_this.$until.checkMobile(_this.registerValue)) {
						uni.showToast({
							title: '手机号格式错误',
							icon: 'none'
						});
						return;
					} else if (_this.newregisterPass != _this.registerPass) {
						console.log(_this.newregisterPass);
						console.log(_this.registerPass);
						uni.showToast({
							title: '两次密码输入不一样',
							icon: 'none'
						});
						return;
					} else {
						let opts = {
							url: 'Register.shtml'
						};

						let param = {
							phone: _this.registerValue,
							password: _this.registerPass
						};
						_this.$http.httpRequest(opts, param).then(
							res => {
								console.log(res.data);
								if (res.data.code == '200') {
									uni.showToast({
										icon: 'success',
										title: res.data.msg
									});
									_this.type = 1;
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.msg
									});
								}
							},
							error => {
								console.log(error);
							}
						);
					}
				}
			}
		}
	};
</script>

<style></style>
